
function shapePicked(imgName){
	var paper = Raphael(document.getElementById('holder'), 600, 450);
	paper.setStart();
	
	var holder = document.getElementById('holder');
	//var imgName = 'images/background/Scotty_Cookie';
	var imgFormat = '.png';
	//added by Star to get a layer in the back
	var background01=paper.image("images/background/Background_1.png", 10, 10, 600, 450);
	var background = paper.image(imgName + imgFormat,10,10,600,450);
	
	
	var blueFill = document.getElementById('fillBlue');
	var lGreenFill = document.getElementById('fillLGreen');
	var pinkFill = document.getElementById('fillPink');
	
	var whiteStroke = document.getElementById('strokeWhite');
	var yellowStroke = document.getElementById('strokeYellow');
	var lBlueStroke = document.getElementById('strokeLBlue');
	
	var snowFlakePattern = document.getElementById('snowFlake');
	var heartPattern = document.getElementById('heart');
	var sockPattern = document.getElementById('sock');
	
	var sprinklePattern1 = document.getElementById('sprinkle1');
	var sprinklePattern2 = document.getElementById('sprinkle2');
	var sprinklePattern3 = document.getElementById('sprinkle3');
	var sprinkleSrc;
	
	
	var undoBtn = document.getElementById('undoBtn');
	var fillColorPicked = false;
	var strokeColorPicked = false;
	var patternPicked = false;
	var sprinklePicked = false;
	var paint = false;
	var suffix = '';
	var strokePath = new String('');
	
	//var pinkColor = '#f545eb';
	//var greenColor = '#077643';
	var whiteColor = '#f8f7ea';
	//var blueColor = '#071975';
	var yellowColor ='#e8e50a';
	//var redColor = '#bc0b0b';
	var lBlueColor = '#10ddcc';
	//var lRedColor = '#df377a';
	//var lGreenColor ='#83e80d';
	
	var currentColor;
	var currentPatternIndex;
	var patters = new Array();
	
	var lastPattern;
	
	
	
	blueFill.addEventListener('click', function(e){
		suffix = '_Blue';
		fillColorPicked = true;
		strokeColorPicked = false;
		sprinklePicked = false;
		patternPicked = false;
		
		fillColor();
	}, false);
	lGreenFill.addEventListener('click', function(e){
		suffix = '_LGreen';
		fillColorPicked = true;
		strokeColorPicked = false;
		sprinklePicked = false;
		patternPicked = false;
		fillColor();
	}, false);
	pinkFill.addEventListener('click', function(e){
		suffix = '_Pink';
		fillColorPicked = true;
		strokeColorPicked = false;
		sprinklePicked = false;
		patternPicked = false;
		fillColor();
	}, false);
	


	// yellowStroke.addEventListener('click', function(e){
		// currentColor = yellowColor;
		// strokeColorPicked = true;
		// fillColorPicked = false;
		// patternPicked = false;
		// sprinklePicked = false;
	// },false);
		// lBlueStroke.addEventListener('click', function(e){
		// currentColor = lBlueColor;
		// strokeColorPicked = true;
		// fillColorPicked = false;
		// patternPicked = false;
		// sprinklePicked = false;
	// },false);
		
	snowFlakePattern.addEventListener('click', function(e){
		strokeColorPicked = false;
		fillColorPicked = false;
		sprinklePicked = false;
		patternPicked = true;
		currentPatternIndex = 1;
	},false);
	heartPattern.addEventListener('click', function(e){
		strokeColorPicked = false;
		fillColorPicked = false;
		sprinklePicked = false;
		patternPicked = true;
		currentPatternIndex = 2;
	}, false);
	sockPattern.addEventListener('click', function(e){
		strokeColorPicked = false;
		fillColorPicked = false;
		sprinklePicked = false;
		patternPicked = true;
		currentPatternIndex = 3;
	}, false);
	sprinklePattern1.addEventListener('click', function(e){
		strokeColorPicked = false;
		fillColorPicked = false;
		patternPicked = false;
		sprinklePicked = true;
		sprinkleSrc = 'images/icons/sprinkles1.png';
	}, false);
	sprinklePattern2.addEventListener('click', function(e){
		strokeColorPicked = false;
		fillColorPicked = false;
		patternPicked = false;
		sprinklePicked = true;
		sprinkleSrc = 'images/icons/sprinkles2.png';
	
	}, false);
	sprinklePattern3.addEventListener('click', function(e){
		strokeColorPicked = false;
		fillColorPicked = false;
		patternPicked = false;
		sprinklePicked = true;
		sprinkleSrc = 'images/icons/sprinkles3.png';
	
	}, false);
	undoBtn.addEventListener('click',function(e){
		paper.set().pop();
		paper.clear();
		paper.set(paper.set());
	},false);
	holder.addEventListener('mousedown', mousedownFn, false);
	holder.addEventListener('mousemove', mousemoveFn, false);
	holder.addEventListener('mouseup', mouseupFn, false);
	holder.addEventListener('mouseleave', mouseleaveFn, false);
	
	function fillColor(){
		if(fillColorPicked){
			paper.clear();
			//added by Star to get a layer in the back		
			background01=paper.image("images/background/Background_1.png", 10, 10, 600, 450);
			background = paper.image(imgName+suffix+imgFormat,10,10,600,450);
		}
	}
	
	function mousedownFn(e){
	
	//var a = paper.image("C:\Users\xingxu\Desktop\Dropbox\ecard-IE (1)\images\background\Background_1.png", 10, 10, 80, 80);
	
		if(strokeColorPicked){
			paint = true;
			strokePath += 'M '+ (e.pageX - this.offsetLeft) + ' ' + (e.pageY - this.offsetTop);
			strokePath += ' L' + (e.pageX - this.offsetLeft) + ' ' + (e.pageY - this.offsetTop);
			paper.set(paper.path(strokePath)).attr({stroke:currentColor, 'stroke-width':5, 'stroke0linejoin':'round'});
			
		}
		
		else if(patternPicked){
			
			if(currentPatternIndex == 1){
				paper.snowFlakeFn(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, 15)
			}else if(currentPatternIndex == 2){
				paper.heartFn(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, 20);
				
			}else if(currentPatternIndex == 3){
				paper.sockFn(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, 15);
				
			}
			
		}
		
		else if(sprinklePicked){
			//sprinkleFn(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, 30);
			paper.image(sprinkleSrc, e.pageX - this.offsetLeft, e.pageY - this.offsetTop, 50, 50);
		}
	}

	function mousemoveFn(e){
		if(paint){
			strokePath += ' L' + (e.pageX - this.offsetLeft )+' ' + (e.pageY - this.offsetTop);
			//paper.renderfix();
			paper.set(paper.path(strokePath))
							.attr({stroke:currentColor, 'stroke-width':5, 'stroke0linejoin':'round'})
							.glow({width:7, color:'#d8f8e9'});
			
		}
	}
	
	function mouseupFn(e){
		if(paint){
			paint = false;
			//paper.path(strokePath);
			strokePath = '';
		}
	}
	
	function mouseleaveFn(e){
		if(paint){
			paint = false;
			strokePath = ''
			//paper.path(strokePath);
		}
	}
	
	Raphael.fn.snowFlakeFn = function(x,y,r){
		var snowFlakePath = 'M' + x + ' ' + (y-r) +' ';
		snowFlakePath += 'L' + x + ' ' + (y+r) +' ';
		snowFlakePath += 'M' + (x - r * Math.cos(30 / 180 * Math.PI)) + ' ' + (y - r * Math.sin(30 / 180 * Math.PI)) + ' ';
		snowFlakePath += 'L' + (x + r * Math.cos(30 / 180 * Math.PI)) + ' ' + (y + r * Math.sin(30 / 180 * Math.PI)) + ' ';
		snowFlakePath += 'M' + (x - r * Math.cos(30 / 180 * Math.PI)) + ' ' + (y + r * Math.sin(30 / 180 * Math.PI)) + ' ';
		snowFlakePath += 'L' + (x + r * Math.cos(30 / 180 * Math.PI)) + ' ' + (y - r * Math.sin(30 / 180 * Math.PI)) + ' z';
		
		return this.set( this.path(snowFlakePath)
								.attr({stroke:"#a4e2f7", 'stroke-width':5, 'stroke-linejoin':'round'})
								.glow({width:7, color:'#f1f5d9'})
								);
	}
	
	Raphael.fn.heartFn = function(x, y, r){
		

		var heartPath = 'M ' + x + ' ' + y;
		heartPath += 'C ' + (x + r * Math.cos(45 / 180 * Math.PI) / 2) + ' ' + ( y - r*Math.sin(45 / 180 * Math.PI) / 2) 
				+ ' ' +(x + r*Math.cos(45 / 180 * Math.PI)) + ' ' + (y + r - r*Math.sin(45 / 180 * Math.PI)) + ' ' + x + ' ' + (y + r) ;
		heartPath += ' M ' + x + ' ' + y;
		heartPath += ' C ' + (x - r * Math.cos(45 / 180 * Math.PI ) / 2) + ' ' + ( y - r*Math.sin(45 / 180 * Math.PI) / 2) 
			+ ' ' +(x - r*Math.cos(45 / 180 * Math.PI)) + ' ' + (y + r - r*Math.sin(45 / 180 * Math.PI)) + ' ' + x + ' ' + (y + r);
		return this.set(this.path(heartPath)
							.attr({stroke:"#f63172", 'stroke-width':3, 'stroke-linejoin':'round', fill:'#f63172'})
							.glow({width:7, color:'#f1f5d9'})
							);
		
	}
	
	Raphael.fn.sockFn = function(x, y, r){
		var sockPath = 'M ' + x +' ' + y;
		sockPath += ' C ' + (x - r/2) + ' ' + (y-r) + ' ' + (x-r/2) + ' ' + (y-r) + ' ' + (x-r) + ' ' + (y-r);
		sockPath += ' S ' + (x - 2*r) + ' ' + (y-r) + ' '+ ( x - 2 * r) + ' ' + ( y - 2 * r );
		sockPath += ' V ' + (y - 3 *r) + ' H ' + (x - 4*r) + ' V ' + (y - 2*r) + ' H ' + (x - 2*r);
		sockPath += ' M ' + (x - 4 * r) + ' ' + (y - 2 * r);
		sockPath += ' V ' + y;
		sockPath += ' C ' + (x - 4 * r - r/2) + ' ' + (y + r) +  ' ' + (x - r/2) + ' ' + (y + r) + ' ' + x + ' ' + y;
		return this.set(this.path(sockPath)
							.attr({stroke:'#ff1212', 'stroke-width':3, 'stroke-linejoin':'round'})
							.glow({width:7, color:'#f1f5d9'})
							); 
	}
	
	 function sprinkleFn(x,y,r){
		var controlX, controlY;
		for(var i = 0; i < Math.max((Math.random() * 80), 40); i++){
			var color = Raphael.getColor();
			controlX = Math.random();
			controlY = Math.random();
			if(x > 0.5 && y > 0.5)
				paper.circle(x + Math.random() * r, y + Math.random() * r, Math.max(Math.random() * 1.5, 0.5)).attr({stroke:color, fill:color});
			else if(x <= 0.5 && y > 0.5)
				paper.circle(x - Math.random() * r, y + Math.random() * r,  Math.max(Math.random() * 1.5, 0.5)).attr({stroke:color, fill:color});
			else if(x <= 0.5 && y <= 0.5) 
				paper.circle(x - Math.random() * r, y - Math.random() * r,  Math.max(Math.random() * 1.5, 0.5)).attr({stroke:color, fill:color});
			else if(x > 0.5 && y <= 0.5)
				paper.circle(x + Math.random() * r, y - Math.random() * r,  Math.max(Math.random() * 1.5, 0.5)).attr({stroke:color, fill:color});
		}
		Raphael.getColor.reset();
	}
};


							

